<template>
  <div class="map-container">
    <div id="cesiumContainer" class="mars3d-map"></div>
  </div>
</template>

<script>
import ThreeDFMap from '@/plugins/ThreeDFMapSource'

export default {
  name: 'selfMap',
  data () {
    return {}
  },
  mounted () {
    this.initWork()
  },
  methods: {
    initWork () {
      var imageryProvider = mars3d.layer.createImageryProvider({
        type: 'www_tdt',
        layer: 'img_d',
        key: [
          '313cd4b28ed520472e8b43de00b2de56',
          '83b36ded6b43b9bc81fbf617c40b83b5',
          '0ebd57f93a114d146a954da4ecae1e67',
          '6c99c7793f41fccc4bd595b03711913e',
          '56b81006f361f6406d0e940d2f89a39c'
        ],
        // "proxy": "http://data.marsgis.cn/proxy/",  //代理服务，解决跨域问题
      })
      var viewer = ThreeDFMap.createMap('cesiumContainer', {
        imageryProviderViewModels: this.getImageryProviderArr()
      }, {
        center: { "y": 18.919516, "x": 116.700614, "z": 2275206.51, "heading": 357.9, "pitch": -66.7, "roll": 0 },
      });
      // ThreeDFMap.addImageLayer(viewer, {
      //   type: 'image',
      //   url: 'http://data.marsgis.cn/file/img/radar/201906211112.PNG',
      //   rectangle: { "xmin": 73.16895, "xmax": 134.86816, "ymin": 12.2023, "ymax": 54.11485 },
      // })
      // ThreeDFMap.addPoint(viewer);
      // ThreeDFMap.addParticleSystem(viewer);
      ThreeDFMap.addAnimationPoint(viewer, {color: 'red', scale: 2});
    },
    getImageryProviderArr () {
      var providerViewModels = []
      var imgModel

      imgModel = new Cesium.ProviderViewModel({
        name: '百度电子',
        tooltip: '百度电子地图服务',
        iconUrl: 'img/basemaps/gaode_vec.png',
        creationFunction: function () {
          return mars3d.layer.createImageryProvider({
            type: 'www_baidu',
            layer: 'vec'
          })
        }
      })
      providerViewModels.push(imgModel)

      imgModel = new Cesium.ProviderViewModel({
        name: '百度影像',
        tooltip: '百度影像地图服务',
        iconUrl: 'img/basemaps/gaode_img.png',
        creationFunction: function () {
          return [
            mars3d.layer.createImageryProvider({
              type: 'www_baidu',
              layer: 'img_d'
            }),
            mars3d.layer.createImageryProvider({
              type: 'www_baidu',
              layer: 'img_z'
            })
          ]
        }
      })
      providerViewModels.push(imgModel)

      imgModel = new Cesium.ProviderViewModel({
        name: '百度深蓝色',
        tooltip: '百度midnight地图服务',
        iconUrl: 'img/basemaps/bd-c-midnight.png',
        creationFunction: function () {
          return mars3d.layer.createImageryProvider({
            type: 'www_baidu',
            layer: 'custom',
            customid: 'midnight'
          })
        }
      })
      providerViewModels.push(imgModel)

      imgModel = new Cesium.ProviderViewModel({
        name: '百度黑色',
        tooltip: '百度dark地图服务',
        iconUrl: 'img/basemaps/bd-c-dark.png',
        creationFunction: function () {
          return mars3d.layer.createImageryProvider({
            type: 'www_baidu',
            layer: 'custom',
            customid: 'dark'
          })
        }
      })
      providerViewModels.push(imgModel)

      imgModel = new Cesium.ProviderViewModel({
        name: '离线百度瓦片',
        tooltip: '离线百度瓦片',
        iconUrl: 'img/basemaps/arcgis.png',
        creationFunction: function () {
          return mars3d.layer.createImageryProvider({
            type: 'www_baidu',
            url: serverURL + serverURL + '/maptile/baidu_vec/{z}/{x}/{y}.jpg'
          })
        }
      })
      providerViewModels.push(imgModel)

      return providerViewModels
    }

  }
}
</script>

<style lang="scss" scoped>
.map-container {
  height: 100%;
  position: relative;

  .mars3d-map {
    height: 100%;
  }
}
</style>
